<link rel="stylesheet" type="text/css" href="static/hotel/css/monitor.css">
<div id="monitorArea" style="width:100%;height:100%;overflow: hidden;"></div>

<!-- 搜索部分--begin -->
<div id="monitorSearch" class="monitorSearchBox">
	<form id="monitorSearchForm">
	<table cellpadding="5">
		<tr>
			<td>所属区域:</td>
			<td>
				<@eu.comboBox id="roomServiceAreaSearch" url="common.do?loadComboBox&key=SERVICE_AREA&isSearch=true" name="serviceAreaSearch" onSelect="monitorDataFilter()"/>
			</td>
			<td>所属楼层:</td>
			<td>
				<@eu.comboBox id="roomFloorSearch" url="common.do?loadComboBox&key=ROOM_FLOOR&isSearch=true" name="roomFloorSearch" onSelect="monitorDataFilter()"/>
			</td>
			<td>房间类型:</td>
			<td>
				<@eu.comboBox id="roomTypeSearch" url="common.do?loadComboBox&key=ROOM_TYPE&isSearch=true" name="roomTypeSearch"  onSelect="monitorDataFilter()"/>
			</td>
			
		</tr>
		<tr>
			<td>房间状态:</td>
			<td>
				<@eu.comboBox id="roomStatusSearch" url="common.do?loadComboBox&key=ROOM_STATUS&isSearch=true" name="roomStatusSearch" onSelect="monitorDataFilter()"/>
			</td>
			<td>
				房间号:
			</td>
			<td>
				<input id="roomNoSearch" name="roomNo"  class="easyui-validatebox" onchange="monitorDataFilter()" onkeyup="monitorDataFilter()"/>
			</td>
			<td>
				<@eu.linkbutton showName="切换模式" style="color:white;" shiro="hotel:device:add" iconCls="icon-switch" onclick="switchMode();"/>
<!-- 				<@eu.linkbutton showName="重置" shiro="hotel:device:reset" iconCls="icon-clear" onclick="clearSearcher();"/> -->
<!-- 				<@eu.linkbutton showName="全选切换" shiro="hotel:device:add" iconCls="icon-switch" onclick="selectAll();"/> -->
<!-- 				<@eu.linkbutton showName="获取选中" shiro="hotel:device:add" iconCls="icon-switch" onclick="getSelects();"/> -->
<!-- 				,iconCls:'icon-switch' -->
<!-- 				<a id="switchBtn" href="#" class="easyui-linkbutton" data-options="toggle:true" onclick="switchBtn()">开</a> -->
			</td>
		</tr>
	</table>
	</form>
</div>
<!-- 搜索部分--end -->
	
<!-- 底部统计--end -->
<div id="monitorAreaFooter">
	<div style="float: left;margin-left: 5px;">
    		房间数量:<span id="monitorCount">0</span>
   	</div>
   	<div class="divBorder" style="margin-left: 5%;">
   		<img height="12px" src="static/hotel/images/kongfang.png"/>空房:<em id="monitorCleanCount">0</em>&nbsp;
		<img height="12px" src="static/hotel/images/zangfang.png"/>脏房:<em id="monitorClearCount">0</em>&nbsp;
		<img height="12px" src="static/hotel/images/guzhang.png"/>故障:<em id="monitorMaintainCount">0</em>&nbsp;
		<img height="12px" src="static/hotel/images/ruzhu.png"/>入住:<em id="monitorWorkOffCount">0</em>&nbsp;
		<img height="12px" src="static/hotel/images/yuyue.png"/>预约:<em id="monitorYuyueCount">0</em>
		<img height="12px" src="static/hotel/images/yutui.png"/>预退:<em id="monitorOutCount">0</em>
		<img height="12px" src="static/hotel/images/weixiu.png"/>维修:<em id="monitorWeixiuCount">0</em>
		<img height="12px" src="static/hotel/images/qingsao.png"/>清扫:<em id="monitorQingsaoCount">0</em>
    </div>
</div>
<div id="alarmSound"></div>
<!-- 底部统计--end -->


<script>
	var monitorLayout = new dhtmlXLayoutObject("monitorArea", "1C");
	monitorLayout.cells("a").hideHeader();
	monitorLayout.attachHeader("monitorSearch");
	var monitorStatusBar = monitorLayout.cells("a").attachStatusBar();
	monitorStatusBar.setText($("#monitorAreaFooter").html());
// 	$("#monitorAreaFooter").remove();
	var mode = '2';
	var roomMonitorClientId= "roomMonitor"+new Date().getTime();
	var rtDataView;
	initRtDataView();
	
	printLog('load');
	function initRtDataView() {
		printLog('initRtDataView');
		var width = mode=='1'?100:185;
		var height = mode=='1'?76:180;
		printLog('模式='+mode);
		var dataViewConfig = {
				type: {
// 					template: "html->monitorTemplateContainer"+mode,
					template:function(obj){
						return createDataViewHtml(obj,mode);
					},
					width:width,
					height:height,
					margin:0,
					padding:3,
					select:"multiselect",
				}
			};
		rtDataView = monitorLayout.cells("a").attachDataView(dataViewConfig);
		rtDataView.load("room.do?loadAllMonitingRooms&clientId="+roomMonitorClientId, "json", function(){
			monitorDataFilter();
	    });
		rtDataView.attachEvent("onItemDblClick", function(id){
			var data = rtDataView.get(id);
			printLog(data);
			fiterRoomStatu(data);
		});
		
// 		rtDataView.attachEvent("onItemClick", function(id){
// 	 		
// 		});
	}
	
	var runMonitorRoom = {};
	function createDataViewHtml(obj,mode) {
		var html = "";
		if(!obj.customer) obj.customer='';
		if(mode=='1') {
			html = '<div align="center" class="rmStatus'+obj.status+'"><div onmouseover="showPopUpInfo(this);" onmouseout="hidePopUpInfo(this);"><img onmousedown="return false;" border="0" width="48" src="static/hotel/images/roomShow.png"><div class="displayN" style="position: fixed;top: 263px;left: 325px;z-index: 9999999;display:none;" align="left"><div class="poPupInfo" style="padding:0px;margin: 0px;"><p class="poPupInfo_title_p" style="padding:0px;margin: 0px;">房间信息</p><table class="poPupInfo_text_table"><tr><td>状态:</td><td>'+roomStatusMap[obj.status]+'</td></tr>';
			var deviceLinks = obj.compomentInfosMap;
// 			printLog(deviceLinks);
			for(var index in deviceLinks) {
				var type = deviceLinks[index].type;
				var cs = deviceLinks[index].status;
				if(type!='node') {
					html += '<tr><td>'+deviceLinkTypeMap[type]+'状态:</td><td>'+componentStatusMap[cs]+'</td></tr>';
				}
			}
			
			html += '</table><div><ul class="poPupInfo_op_ul">';
			if(obj.operationStatus) {
				for(var key in obj.operationStatus) {
					html += '<li style="color:orange;">'+operationMap[key]+'</li>';
				}
			}
// 			printLog(obj.operationStatus);
			html += '<li style="border-top: 1px dotted #999999;" onclick="roomOperation('+obj.id+')" title="详细控制">详细控制</li></ul></div></div></div><p class="dhx_item_text" style="word-wrap:break-word; word-break:normal;" title="'+obj.name+'">'+obj.roomNo+'</p><p>'+obj.customer+'</p></div></div>';
		}else if(mode=='2') {
			html = '<div class="divRoomMonitor rmStatus'+obj.status+'" ><table>';
			html += '<tr><td class="showRoomNoStatus"><table class="rMTbl" style="width: 100%;height: 100%;"><tr><td class="rmTblTd rmTdNo" onclick="roomOperation('+obj.id+')">'+obj.roomNo+'</td><td class="rmTblTd rmQingk rmStatus'+obj.status+'">'+roomStatusMap[obj.status]+'</td><td class="rmTblTd rmQingk" style="background-color: rgb(172, 206, 34);">'+obj.occupy+'</td></tr></table></td></tr>';
				html += '<tr><td width="180px" height="60px;"><table class="acTbl'+obj.acPower+'"><tr><td class="acTempTbl'+obj.acPower+'">'+obj.acTemp+'&#8451;</td><td><img alt="" src="static/hotel/images/'+getAcMode(obj)+'.png" width="20"></td><td><img alt="" src="static/hotel/images/door'+obj.doorStatus+'.png" width="35"></td></tr></table></td></tr>';
					html += '<tr><td width="180px" height="60px;"><table class="" style="background-color:  rgb(98,195, 208);width: 100%;height: 100%;"><tr><td colspan="2" class="rmTblCTd">顾客请求</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['17']+'">出租</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['15']+'">报警</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['3']+'">退房</td></tr><tr><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['5']+'">送餐</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['7']+'">洗衣</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['9']+'">行李</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['11']+'">勿扰</td><td class="rmTblCTd rmTblOpTd'+obj.operationStatus['1']+'">清扫</td></tr></table></td></tr>';
						html += '</table></div>';

		}
		//设置弹出报警
		//存放监控
		runMonitorRoom[obj.id]=obj;
// 		printLog(obj);
// 		if(obj.status=='3') {
// // 			alarmHandle(obj);
// // 			printLog('4564654');
// 			openMsg({title:'报警提醒',msg:obj.roomNo+'顾客报警',width:300,height:200,timeout:0,position:'bottomRight',icon:'warning'});
// 			openAlarmSound();
// 		}else if(!isOpenAlarm){
// 			closeAlarmSound();
// 		}
		return html;
	}
// 	window.setInterval("alarmRunning()" , 5000);
	var alarmRunningTime = window.setTimeout("alarmRunning()" , 200);
	var alarmWin = null;
	function alarmRunning() {
			var c = '';
			for(var index in runMonitorRoom)
			{
				var obj = runMonitorRoom[index];
				printLog(obj);
				if(obj.status=='3') {
					c += obj.faultInfo;
				}
				
			}
			printLog(c);
// 			if(alarmWin) alarmWin.window('close');
			if(c!='') {
				showErrorMsg(c);
// 				alarmWin = openMsg({title:'报警提醒',msg:c,width:300,height:200,timeout:0,position:'bottomRight',icon:'error'});
				openAlarmSound();
			}else {
				closeAlarmSound();
			}
			window.clearTimeout(alarmRunningTime);
			alarmRunningTime = window.setTimeout("alarmRunning()" , 5000);
	}
	
	function showErrorMsg(content) {
		dhtmlx.message.position="bottom";
// 		expire:-1,
		dhtmlx.message({ type:"error",text:content,type:"customCss"})
	}
	
	function getAcMode(obj) {
		var acMode = obj.acMode;
		if('fan'==acMode) {
			acMode = obj.acFan;
		}
		
		if('on'==obj.acPower) {
			acMode += 'w';
		}
		return acMode;
	}
	
	var isOpenAlarm = false;
	function openAlarmSound() {
		closeAlarmSound();
		isOpenAlarm = true;
		printLog('报警');
		var sound = "static/hotel/alarm.wav";
		if (isFirefox()||isChrome())
		{
			$("#alarmSound").html("<audio id='alarmAudio' controls='controls' hidden='true' loop='true' ><source name = 'soundname' src='"+sound+"' type='audio/mp3' preload='auto' /><source name = 'soundname' src='"+sound+"' type='audio/x-wav' preload='auto'/><embed name = 'soundname' height='100' width='100' src='"+sound+"' preload='auto'/></audio>");
			alarmAudio.play();
		}
		else
		{
			$("#alarmSound").html("<bgsound id='myaudio' src='"+sound+"' loop='-1'/>");
		}
	}
	
	//报警声音
	function closeAlarmSound()
	{
		if (isFirefox()||isChrome())
		{
			$("#alarmAudio").remove();
		}else
		{
			$("#alarmAudio").attr("src","");
			$("#alarmAudio").attr("volume","-10000");
			$("#alarmSound").html("<bgsound id='alarmAudio' src='#' loop='-1'/>");
		}
	}
	
	
// 	rtDataView.attachEvent("onItemClick", function(id){
// 		printLog(id);
// 		var check = rtDataView.isSelected(id);
// 		printLog(check);
// 		if(check) {
// 			rtDataView.unselect(id);
// 		}else {
// 			rtDataView.select(id);
// 		}
		
// 	});
	//进行条件过滤
	function monitorDataFilter()
	{
		rtDataView.filter((function(obj,value){
			printLog(obj.roomFloor);
			printLog($("#roomFloorSearch").combobox('getValue'));
			if(($("#roomNoSearch").val() == "" || obj.roomNo.indexOf($("#roomNoSearch").val()) != -1) 
			   &&(($("#roomFloorSearch").combobox('getValue') == "" || obj.roomFloor.indexOf($("#roomFloorSearch").combobox('getValue')) != -1))
			   &&(($("#roomTypeSearch").combobox('getText') == ""||$("#roomTypeSearch").combobox('getText') == "------" || obj.type.indexOf($("#roomTypeSearch").combobox('getText')) != -1))
			   &&(($("#roomServiceAreaSearch").combobox('getValue') == "" || obj.serviceArea.indexOf($("#roomServiceAreaSearch").combobox('getValue')) != -1))
			   &&(($("#roomStatusSearch").combobox('getValue') == "" || obj.status.indexOf($("#roomStatusSearch").combobox('getValue')) != -1)))
			{
				printLog("true");
				return true;
			}
			printLog("false");
			return false;
		}),'monitor');
		setMonitorFooter();
// 		event.PreventDefault();
	}
	
	function setMonitorFooter() {
		//1 脏空 入住 故障 干净 预退
		var clearCount = 0;//脏房
		var workOffCount = 0;//入住
		var maintainCount = 0;//故障
	    var cleanCount = 0;//空房
	    var outCount = 0;//预退
	    var yuyueCount = 0;//预约
	    var weixiuCount = 0;//维修
	    var qingsaoCount = 0;//清扫
	    
        for(var i = 0; i < rtDataView.dataCount(); i++)
        {
        	var connect = rtDataView.get(rtDataView.idByIndex(i)).status;
        	switch (parseInt(connect))
	    	{
				case 1:
					clearCount++;
					break;
				case 2:
					workOffCount++;
					break;
				case 3:
					maintainCount++;
					break;
				case 4:
					cleanCount++;
					break;
				case 5:
					outCount++;
					break;
				case 6:
					yuyueCount++;
					break;
				case 7:
					weixiuCount++;
					break;
				case 8:
					qingsaoCount++;
					break;
			}
        }
		$("#monitorClearCount").html(clearCount);
		$("#monitorCleanCount").html(cleanCount);
		$("#monitorMaintainCount").html(maintainCount);
		$("#monitorOutCount").html(outCount);
		$("#monitorWorkOffCount").html(workOffCount);
		
		$("#monitorYuyueCount").html(yuyueCount);
		$("#monitorWeixiuCount").html(weixiuCount);
		$("#monitorQingsaoCount").html(qingsaoCount);
		
		$("#monitorCount").html(rtDataView.dataCount());
	}
	
	var isSelectAll = false;
	function selectAll() {
		if(isSelectAll) {
			rtDataView.unselect();
		}else {
			rtDataView.select();
		}
		isSelectAll = !isSelectAll;
// 		openMsg({title:'dddd',msg:'2222',width:300,height:200,timeout:0,position:'bottomRight'});
	}
	
	function getSelects() {
		var ids = rtDataView.getSelected();
		printLog(ids);
	}
	
	//切换模式
	function switchMode() {
// 		showErrorMsg("<div class='jingbaoDiv'>客房101空调故障</div><div class='baojingDiv'>客房101顾客报警</div>");
		printLog('切换模式');
		roomMonitorClientId= "roomMonitor"+new Date().getTime();
		mode = mode=='1'?'2':'1';
		initRtDataView();
	}
	
	
	//监控启动
	var monitorRunningTime = window.setTimeout("monitorRunning()" , 5000);
	var jqAjax = null;
	function monitorRunning()
	{
		window.clearTimeout(monitorRunningTime);
		if(jqAjax)
    	{
    		jqAjax.abort();//中断请求
    	}
		jqAjax = $.ajax({
		    type: "GET",
		    url: "room.do?loadAllMonitingRooms&clientId="+roomMonitorClientId,
// 			url:"hotelMonitor.do?moniting&clientId=" + new Date().getTime(),
		    dataType: "json",
		    async: true,
		    success: function(data)
		    {
				if(data != null&&data.length>0)
				{
					dealRoomMonitorData(data);
				}
// 				printLog(data);
				monitorRunningTime = window.setTimeout("monitorRunning()" , 5000);
		    },
		    error:function (XMLHttpRequest, textStatus, errorThrown)
		    {
	 			window.clearTimeout(monitorRunningTime);
	 		}
		});
	}
	//处理房间状态
	function dealRoomMonitorData(data)
	{
		var length = data.length;
		if(length > 0)
		{
			for(var i=0;i<length;i++)
            {
				var id = data[i].id;	
				if(rtDataView.exists(id))//判断是否存在该id（修改）
				{
					var viewData = rtDataView.get(id);
					rtDataView.set(id, $.extend(viewData,  data[i]));
                }
                else//新增
                {
                	rtDataView.add(data[i]);
//                 	printLog('新增'+id);
//                 	devMonitorGrid.addRow(id, dataObj.rows[i].data);
//                 	devMonitorGrid.setRowTextStyle(id, dataObj.rows[i].style);
                }	
            }
			//重新统计
			setMonitorFooter();
		}
		
// 		for(var index in data)
// 		{
// 			var id = data[index].id;
			
// 			if(id==undefined) continue;
// 			if(rtDataView.exists(id))
// 			{
// 				var viewData = rtDataView.get(id);
// 				rtDataView.set(id, $.extend(viewData,  data[index]));
// 			}
// 		}
	}
	
	//显示浮动信息
	function showPopUpInfo(obj)
	{
		var offsetTop = $(obj).offset().top + $(obj).height()/1.5 - $(document).scrollTop();
		if($(document.body).height() - offsetTop < $(obj).children("div").height())//判断距离底部的距离是否小于提示框的高度
		{
			offsetTop = $(obj).offset().top - ($(document).scrollTop() + $(obj).children("div").height() + 10) + $(obj).height()/2.5;
		}
		var offsetLeft = $(obj).offset().left + $(obj).width()/1.5 - $(document).scrollLeft();
		if($(window).width() - offsetLeft < $(obj).children("div").width())//判断距离底部的距离是否小于提示框的高度
		{
			offsetLeft = $(obj).offset().left - ($(document).scrollLeft() + $(obj).children("div").width() + 10) + $(obj).width()/2.5;
		}
		
		$(obj).children("div").css("top", offsetTop);
		$(obj).children("div").css("left", offsetLeft);
		$(obj).children("div").show();
		
	}
	
	//隐藏浮动信息
	function hidePopUpInfo(obj)
	{
		$(obj).children("div").hide();
	}
	
	function roomOperation(objId) {
		createFromWindowOptions({
			title:"房间控制",
			width:1100,
			height:600,
			maximizable:true,
			href: "room.do?operationRoom&roomId="+objId,
			callback:function(data) {
				saveRoomInfo();
			},
			enableSaveButton:false
		});
	}
	
	function switchBtn() {
// 		$('#switchBtn').linkbutton("setIcon", "icon-switch");
// 		$('#switchBtn').linkbutton("setText", "关");
// 		$('#switchBtn').linkbutton("setStyle", {
//             backgroundColor: "Red",
//             color: "Blue"
//         });
// 		var text = $('#switchBtn');
		var linkBtn = $('#switchBtn').linkbutton();//easyui-linkButton获取按钮text
// 		printLog(linkBtn[0].innerText);
		var text = linkBtn[0].innerText.trim();
// 		printLog(text+'-------开');
		if(text=='开') {
// 			printLog('开->关');
			$('#switchBtn').linkbutton({ text: "关"});
		}else if(text=='关') {
// 			printLog('关->开');
// 			$('#switchBtn').linkbutton({ text: "开", iconCls: "icon-switch" });
			$('#switchBtn').linkbutton({ text: "开"});
		}
		
	}
	
	function clearSearcher() {
		$('#monitorSearchForm').form('clear');
		monitorDataFilter();
	}
</script>
	<style>
	 .divRoomMonitor {
	 	text-align: center;
	 	width:185px; 
	 	height: 180px;
	 	background-color: rgb(172, 206, 34)
	 }
	 .showRoomNoStatus {
	 	width:180px;
	 	height:40px;
	 }
	 .rmTblTd {
/* 	 	font-weight:bold; */
	 	border:1px solid rgb(202, 231, 244);
	 	text-align: center;
	 }
	 .rmTblCTd {
/* 	 	font-weight:bold; */
	 	text-align: center;
	 }
	 .rmTdNo {
	 	background-color: rgb(0,160, 233);
	 	font-size: 20px;
	 }
	 .rmTblOpTd,.rmTblOpTdundefined {
	 	background-color:  rgb(202,202, 202);
	 }
	 
	 .rmTblOpTd1,.rmTblOpTd3,.rmTblOpTd5,.rmTblOpTd7,.rmTblOpTd9,.rmTblOpTd11,.rmTblOpTd13,.rmTblOpTd17 {
	 	background-color:  yellow;
	 }
	 .rmTblOpAlarm,.rmTblOpTd15 {
	 	background-color:  red;
	 }
	 .acTblon {
	 	background-color: black;
	 	width: 100%;
	 	height: 100%;
	 }
	 .acTbloff {
	 	background-color: rgb(93,93, 93);
	 	width: 100%;
	 	height: 100%;
	 }
	 .acTempTblon {
	 	color: white;
	 	font-size: 30px;
	 }
	  .acTempTbloff {
	 	color: rgb(150,150,150);
	 	font-size: 30px;
	 }
	 .acTempTblnull {
	 	color: rgb(150,150,150);
	 	font-size: 30px;
	 }
/* 	 脏房  */
	 .rmStatus1 {
	 	background-color: rgb(137,118, 91);
	 }
/* 	 入住 */
	 .rmStatus2 {
	 	background-color: rgb(205,129, 179);
	 }
/* 	 故障 */
	 .rmStatus3 {
	 	background-color: rgb(230,33, 41);
	 }
/* 	 空房 */
	 .rmStatus4 {
	 	background-color: rgb(172,206, 34);
	 }
/* 	 预退 */
	 .rmStatus5 {
	 	background-color: rgb(253,209, 0);
	 }
/* 	 预约 */
	 .rmStatus6 {
	 	background-color: rgb(255,245, 130);
	 }
/* 	 维修中 */
	 .rmStatus7 {
	 	background-color: rgb(240,133, 25);
	 }
/* 	 清扫中 */
	 .rmStatus8 {
	 	background-color: rgb(160,217, 246);
	 }
	 .rmQingk {
	 	width:46px;
	 	font-size: 20px;
	 }
	 .dhtmlx-customCss {
 	    background-color: #f17373;
	    color: #fff;
 	    height:104px;
	 }
	  /*报警*/
	 .baojingDiv {
	   background-image: url(static/hotel/images/baojing.png);
	   background-repeat: no-repeat;
	   height: 52px;
	   padding-left: 52px;
	   padding-top: 15px;
	 }
	 /*故障*/
	 .jingbaoDiv {
	   background-image: url(static/hotel/images/jingbao.png);
	   background-repeat: no-repeat;
	   height: 52px;
	   padding-left: 52px;
	   padding-top: 15px;
	 }
	</style>